<template id="left_tp">
    <div>

        <div class="leftwrap">
            <div style="padding-top: 20px;">
                <div v-for="v in navs">
                    <div class="leftitem" @click="setnav(v)">{{v.title}}</div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    /*获取子组件*/
    var left_globalajax = ''
    window.vueComs = () => {
        return new Promise((resv, rej) => {
            left_globalajax ? (left_globalajax.abort(), left_globalajax = null) : ''
            left_globalajax = $.ajax({
                url: './components/subcoms/vueCom.html', dataType: 'html', success: (res) => {
                    left_globalajax = null
                    document.getElementById('vueCom_tp') ? "" : $('#TEMPLATE').append(res); resv()
                }
            })
        })
    };
    window.reactComs = () => {
        return new Promise((resv, rej) => {
            left_globalajax ? (left_globalajax.abort(), left_globalajax = null) : ''
            left_globalajax = $.ajax({
                url: './components/subcoms/reactCom.html', dataType: 'html', success: (res) => {
                    left_globalajax = null
                    document.getElementById('reactCom_tp') ? "" : $('#TEMPLATE').append(res); resv()
                }
            })
        })
    };
    window.traoComs = () => {
        return new Promise((resv, rej) => {
            left_globalajax ? (left_globalajax.abort(), left_globalajax = null) : ''
            left_globalajax = $.ajax({
                url: './components/subcoms/traoCom.html', dataType: 'html', success: (res) => {
                    left_globalajax = null
                    document.getElementById('traoCom_tp') ? "" : $('#TEMPLATE').append(res); resv()
                }
            })
        })
    };
    window.uniappComs = () => {
        return new Promise((resv, rej) => {
            left_globalajax ? (left_globalajax.abort(), left_globalajax = null) : ''
            left_globalajax = $.ajax({
                url: './components/subcoms/uniappCom.html', dataType: 'html', success: (res) => {
                    left_globalajax = null
                    document.getElementById('uniappCom_tp') ? "" : $('#TEMPLATE').append(res); resv()
                }
            })
        })
    };
    /*export default*/
    var left_tp = {
        template: '#left_tp',
        data() {
            return {
                loadflag: 0,
                navs: [
                    { com: 'vueCom_tp', title: 'vue开发页面流程', fn: vueComs },
                    { com: 'reactCom_tp', title: 'react开发页面流程', fn: reactComs },
                    { com: 'uniappCom_tp', title: 'uniapp开发页面流程', fn: uniappComs },
                    { com: 'traoCom_tp', title: 'taro开发页面流程', fn: traoComs },
                ]
            }
        },
        methods: {
            setnav(v, q) {
                this.$root.contwrapshow = 0
                if (!document.getElementById(v.com)) {
                    v.fn().then(() => {
                        app.component(v.com, window[v.com])
                        this.$root.navchange = v.com
                        location.hash.indexOf('#' + v.com) != -1 ? '' : (location.hash = '#' + v.com + (q || ''))
                        setTimeout(() => {
                            this.$root.contwrapshow = 1
                        })
                    })
                } else {
                    this.$root.navchange = v.com
                    location.hash.indexOf('#' + v.com) != -1 ? '' : (location.hash = '#' + v.com + (q || ''))
                    setTimeout(() => {
                        this.$root.contwrapshow = 1
                    })
                }
            }
        },
        watch: {
            'location.hash': {
                deep: true,
                handler(news, old) {
                    if (!this.$root.navchange) {
                        location.hash = '#vueCom_tp'
                    } else {
                        location.hash = news
                    }
                }
            }
        },
        mounted() {
            var q = ''
            if (location.hash.indexOf('?') != -1) {
                q = '?' + location.hash.split('?')[1]
            }
            var fn = () => {
                this.$root.navchange = (
                    location.hash.split('#')[1] ? (
                        location.hash.split('#')[1].indexOf('?') != -1 ? location.hash.split('#')[1].split('?')[0] : location.hash.split('#')[1]
                    ) : null
                ) || 'vueCom_tp'
                if (!this.loadflag) {
                    this.loadflag = 1
                    for (var i = 0; i < this.navs.length; i++) {
                        if (this.$root.navchange == this.navs[i].com) {
                            this.setnav(this.navs[i], q)
                        }
                    }
                }
                requestAnimationFrame(() => {
                    fn()
                })
            }
            fn()
        }
    }
</script>

<style>
    .leftwrap {
        position: fixed;
        top: 80px;
        left: 0;
        width: 240px;
        height: calc(100vh - 80px);
        background-color: #7d7d7d;
        overflow: hidden auto;
        z-index: 2;
    }

    .leftwrap::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 5px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }

    .leftwrap::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        background: #c7c7c7;
    }

    .leftwrap::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        border-radius: 10px;
        background: #f0f0f0;
    }

    .leftitem {
        padding: 0 20px 20px;
        color: white;
        cursor: pointer;
    }
</style>